<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" href="css/style.css" type="text/css">  
	<link rel="stylesheet" href="css/green.css" type="text/css">  
	<script type="text/javascript" src="js/trimtpl.js"></script>
	<script type="text/javascript" src="js/lightcommons.js"></script>
	<script type="text/javascript" src="js/bundle.js"></script>
	<script type="text/javascript">
    var data = {
        products : [ { name: "mac", desc: "computer",     
                       price: 1000, quantity: 100, alert:null },
                     { name: "ipod", desc: "music player", 
                       price:  200, quantity: 200, alert:"on sale now!" },
                     { name: "cinema display", desc: "screen",       
                       price:  800, quantity: 300, alert:"best deal!" } ],
        customer : { first: "John", last: "Public", level: "gold" }
    };
		window.onDomReady(function(){
			 // The one line processing call...
    var result = TrimPath.processDOMTemplate("cart_jst", data);
    // Voila!  That's it -- the result variable now holds 
    // the output of our first rendered JST.

    // Alternatively, you may also explicitly parse the template...
   // var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");

    // Now, calls to myTemplateObj.process() won't have parsing costs...
    //var result  = myTemplateObj.process(data);
    //var result2 = myTemplateObj.process(differentData);

    // Setting an innerHTML with the result is a common last step...
    $ID('output').innerHTML = result;
    // You might also do a document.write() or something similar...

		});
	</script>
</head>
<body>
<div id="page">
	<div id="header">
	<h1>light commons</h1>
	</div>
	<div id="center">
		<div id="left">
			+-test-+
		</div>
		<div id="main">
			<div id="output">
				
			</div>
		</div>
	</div>
	<div id="footer">
	</div>
</div>
<!-- ------- Start Template---------- -->
<textarea id="cart_jst" style="display:none;">
    Hello ${customer.first} ${customer.last}.<br/>
    Your shopping cart has ${products.length} item(s):
    <table>
     <tr><td>Name</td><td>Description</td>
         <td>Price</td><td>Quantity & Alert</td></tr>
     {for p in products}
         <tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
             <td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>
             </tr>
     {forelse}
         <tr><td colspan="4">No products in your cart.</tr>
     {/for}
    </table>
    {if customer.level == "gold"}
      We love you!  Please check out our Gold Customer specials!
    {else}
      Become a Gold Customer by buying more stuff here.
    {/if}
  </textarea>	
<textarea id="left_jst" style="display:none;">
    
</textarea>	
<textarea id="main_jst" style="display:none">
	
</textarea>
<!-- -------End Template------ -->			
</body>
</html>